<ui:composition template="../principal.xhtml"
                xmlns="http://www.w3.org/1999/xhtml"
                xmlns:ui="http://java.sun.com/jsf/facelets"
                xmlns:h="http://java.sun.com/jsf/html"
                xmlns:f="http://java.sun.com/jsf/core"
                xmlns:p="http://primefaces.org/ui"
                xmlns:c="http://java.sun.com/jsp/jstl/core">
    <ui:define name="principal">
        <h2>Gerenciar Posologias</h2>

        <h:form id="breadcrumb">
            <p:breadCrumb styleClass="navegacao" style="margin-top: 5px; margin-bottom: 40px">  
                <c:if test="#{loginMB.dentista.contaUsuario.tipo == 'AD'}" >  
                    <p:menuitem value="Categories" url="../user-master/menuMaster.xhtml" />  
                </c:if>
                <c:if test="#{loginMB.dentista.contaUsuario.tipo == 'DE'}" >  
                    <p:menuitem value="Categories" url="../user-simple/menuDentista.xhtml" />  
                </c:if>
                <p:menuitem value="Posologias" url="../clinica/gerenciarPosologias.xhtml" /> 
            </p:breadCrumb>
        </h:form>

        <h:form id="cad">
            <p:growl id="message"/>
            <p:fieldset legend="NOVA POSOLOGIA" toggleable="true" toggleSpeed="500" styleClass="grupo-form">
                <h:panelGrid id="novaposologia-display" columns="2" styleClass="table-form" cellspacing="10">
                    <h:outputLabel for="nome-pos" value="*Nome: " />  
                    <p:inputText id="nome-pos" value="#{gerenciarPosologiasMB.medicamento.nome}" required="true" label="Nome" size="70"/>
                    <h:outputLabel for="concentracao" value="*Concentração: " />  
                    <p:inputTextarea id="concentracao" value="#{gerenciarPosologiasMB.medicamento.concentracao}" required="true" label="concentracao" cols="70"/>
                    <h:outputLabel for="tipo" value="*Tipo de Uso: " />  
                    <p:inputText id="tipo" value="#{gerenciarPosologiasMB.medicamento.tipo_uso}" required="true" label="tipo" size="20"/>
                    <h:outputLabel for="via" value="*Via de Uso: " />  
                    <p:inputText id="via" value="#{gerenciarPosologiasMB.medicamento.via_uso}" required="true" label="via" size="20"/>
                    <h:outputLabel for="poso" value="*Posologia: " />  
                    <p:inputTextarea id="poso" value="#{gerenciarPosologiasMB.medicamento.posologia}" required="true" label="poso" cols="70" />
                </h:panelGrid>
                <h:panelGrid columns="1" style="text-align: right; width: 100%;">
                    <p:commandButton id="salvar" value="Salvar" update=":cad, :dados" action="#{gerenciarPosologiasMB.cadastrarMedicamento}" image="ui-icon ui-icon-disk" style="font-size: 15px;" />
                </h:panelGrid>
            </p:fieldset>
        </h:form>

        <p:separator style="margin-top: 20px; margin-bottom: 20px;"/>

        <h:form id="dados">

            <p:dataTable id="table-medicamentos" value="#{gerenciarPosologiasMB.medicamentosTodos}" widgetVar="medicamentoTable" var="medicamento" tableStyle="width:100%" paginator="true" rows="10"  
                         paginatorTemplate="{CurrentPageReport}  {FirstPageLink} {PreviousPageLink} {PageLinks} {NextPageLink} {LastPageLink} {RowsPerPageDropdown}"  
                         rowsPerPageTemplate="10,15,30" paginatorPosition="bottom" paginatorAlwaysVisible="false" emptyMessage="Sem posologias cadastradas." filteredValue="#{gerenciarPosologiasMB.medicamentosFiltrados}" >

                <f:facet name="header">  
                    POSOLOGIAS CADASTRADOS
                </f:facet>

                <p:column headerText="ID" sortBy="#{medicamento.id}" filterMatchMode="contains" filterBy="#{medicamento.id}" filterStyle="display:none;" >  
                    <h:outputText value="#{medicamento.id}" />  
                </p:column>

                <p:column headerText="NOME" sortBy="#{medicamento.nome}" filterMatchMode="contains" filterBy="#{medicamento.nome}" filterStyle="display:none;">  
                    <h:outputText value="#{medicamento.nome}" />  
                </p:column>

                <p:column headerText="CONCENTRAÇÃO" sortBy="#{medicamento.concentracao}" filterMatchMode="contains" filterBy="#{medicamento.concentracao}" filterStyle="display:none;">  
                    <h:outputText value="#{medicamento.concentracao}" />  
                </p:column>

                <p:column headerText="TIPO DE USO" sortBy="#{medicamento.tipo_uso}" filterMatchMode="contains" filterBy="#{medicamento.tipo_uso}" filterStyle="display:none;">  
                    <h:outputText value="#{medicamento.tipo_uso}" />  
                </p:column>

                <p:column headerText="VIA DE USO" sortBy="#{medicamento.via_uso}" filterMatchMode="contains" filterBy="#{medicamento.via_uso}" filterStyle="display:none;">  
                    <h:outputText value="#{medicamento.via_uso}" />  
                </p:column>

                <p:column style="width:40px">  
                    <p:commandButton id="selectButton2" update=":dados:display" oncomplete="posologiaDialog.show()" icon="ui-icon-search" title="Ver">  
                        <f:setPropertyActionListener value="#{medicamento}" target="#{gerenciarPosologiasMB.medicamentoSelecionado}" />
                    </p:commandButton>
                </p:column>

                <f:facet name="footer">  
                    <p:outputPanel style="float: right">  
                        <h:outputText value="BUSCAR: " />  
                        <p:inputText id="globalFilter" onblur="medicamentoTable.filter()" style="width:200px" />  
                    </p:outputPanel> 
                </f:facet>

            </p:dataTable>

            <p:blockUI block="table-medicamentos" trigger="table-medicamentos, :cad:salvar">  
                Carregando...<br />  
                <p:graphicImage library="images" name="loader.gif"/>  
            </p:blockUI>

            <p:dialog header="Detalhes da Posologia" widgetVar="posologiaDialog" resizable="false" id="posologiaDlg" dynamic="true" 
                      showEffect="fade" hideEffect="fade" modal="true">
                <h:panelGrid id="display" columns="1" width="400"> 

                    <h:panelGrid columns="2" cellspacing="10" >
                        <h:outputText value="NOME: " styleClass="rotulo" />
                        <h:outputText value="#{gerenciarPosologiasMB.medicamentoSelecionado.nome}" style="font-weight:bold"/>

                        <h:outputText value="CONCENTRAÇÃO: " styleClass="rotulo" />
                        <h:outputText value="#{gerenciarPosologiasMB.medicamentoSelecionado.concentracao}" style="font-weight:bold"/>

                        <h:outputText value="TIPO DE USO: " styleClass="rotulo" />
                        <h:outputText value="#{gerenciarPosologiasMB.medicamentoSelecionado.tipo_uso}" style="font-weight:bold"/>

                        <h:outputText value="VIA DE USO:" styleClass="rotulo" />
                        <h:outputText value="#{gerenciarPosologiasMB.medicamentoSelecionado.via_uso}" style="font-weight:bold"/>
                    </h:panelGrid>

                    <h:panelGrid columns="1" cellspacing="10" >
                        <h:outputText value="POSOLOGIA: " />
                        <h:outputText value="#{gerenciarPosologiasMB.medicamentoSelecionado.posologia}" style="font-weight:bold"/>
                    </h:panelGrid>

                </h:panelGrid>
                <h:panelGrid columns="2" style="float: right">
                    <p:commandButton value="Excluir" onclick="confirmation.show()" icon="ui-icon-trash" type="button" />
                    <p:commandButton value="Atualizar" update=":cad" action="#{gerenciarPosologiasMB.atualizarMedicamento()}" icon="ui-icon-refresh" oncomplete="posologiaDialog.hide();" />
                </h:panelGrid>
            </p:dialog>

            <p:confirmDialog id="confirmDialog" message="Tem certeza que deseja excluir a Posologia?" header="Excluir Posologia" severity="alert" widgetVar="confirmation">  
                <p:commandButton id="confirm" value="Confirmar" update=":dados, :cad" oncomplete="confirmation.hide()" action="#{gerenciarPosologiasMB.excluirMedicamento()}" />  
                <p:commandButton id="decline" value="Cancelar" onclick="confirmation.hide()" type="button" />   
            </p:confirmDialog>
        </h:form>
    </ui:define>
</ui:composition>